<template>
  <div class="stage-change-section" v-if="changeList.length">
    <div class="table-title">{{ title }}</div>
    <el-table :data="changeList" style="width: 100%">
      <el-table-column prop="field_name" label="字段名" width="180" />
      <el-table-column prop="old_value" label="原值" width="180">
        <template #default="{ row }">
          {{ tableCellFormatter(row.filed, row.old_value) }}
        </template>
      </el-table-column>
      <el-table-column label="新值">
        <template #default="scope">
          <ChangeFieldInput
            v-model="scope.row.new_value"
            :field-type="scope.row.type"
            :field-name="scope.row.field_name"
            :options="scope.row.options"
            :validator="scope.row.validator"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import ChangeFieldInput from '@/views/project/projectChange/components/ChangeFieldInput.vue'
import { tableCellFormatter } from '@/views/project/utils/formatters';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  sourceData: {
    type: Array,
    required: true
  }
})

const changeList = ref([])

// 监听源数据变化
watch(() => props.sourceData, (newVal) => {
  changeList.value = newVal.map(item => ({
    field_name: item.label,
    old_value: item.content,
    new_value: '',
    type: item.type,
    filed: item.filed,
    options: item.options,
    validator: item.validator,
    stage: props.title // 用title作为stage标识
  }))
  
}, { deep: true, immediate: true })

// 暴露changeList给父组件
defineExpose({
  changeList
})
</script>

<style scoped>
@import url('@/views/project/projectDetails/styles/transfer.css');

.stage-change-section {
  margin-bottom: 20px;
}

.table-title {
  margin-bottom: 15px;
}
</style>